<template>
  <div class="center">
    <el-table
    :data="lists"
    border
    style="width: 100%">
    <el-table-column
      align="center"
      label="订单信息"
      width="400">
      <template slot-scope="scope">
        <div class="one-wrap" v-for="(good, index) in scope.row.goods" :key="index">
          <div class="left">
            <img :src="good.cover" alt="">
          </div>
          <div class="right">
            <p style="margin-top:10px">{{good.goodsName}}</p>
            <p>￥ {{good.price}}</p>
            <p>规格: {{good.skuDesc}}</p>
            <span>X {{good.number}}</span>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="deliverTime"
      align="center"
      label="发货时长"
      width="180">
    </el-table-column>
    <el-table-column
      prop="userUsername"
      align="center"
      label="买家"
      width="180">
    </el-table-column>
    <el-table-column
      label="实收款"
      align="center"
      width="180">
      <template slot-scope="scope">
       <span>￥{{scope.row.amount}}(含运费￥{{scope.row.totalCost}})</span>
      </template>
    </el-table-column>
    <el-table-column
      label="状态"
      align="center"
      width="180">
      <template slot-scope="scope">
      <span v-if="scope.row.status == 0">待支付</span>
			<span v-if="scope.row.status == 1">待发货</span>
			<span v-if="scope.row.status == 2">待收货</span>
			<span v-if="scope.row.status == 3">交易完成</span>
			<span v-if="scope.row.status == 4">交易关闭</span>
			<span v-if="scope.row.status == 5">待审核</span>
			<span v-if="scope.row.status == 6">审核未通过</span>
			<span v-if="scope.row.status == 7">待退款</span>
			<span v-if="scope.row.status == 8">退款关闭</span>
			<span v-if="scope.row.status == 9">退货中</span>
		  <span v-if="scope.row.status == 10">退货中待收货</span>
			<span v-if="scope.row.status == 11">退款中</span>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      label="支付方式">
      <template slot-scope="scope">
        <span>微信</span>
      </template>
    </el-table-column>

    <el-table-column
      align="center"
      label="操作">
      <template slot-scope="scope">
        <el-button style="display: block;margin:3px auto" size="mini" type="info">查看详情</el-button>
        <el-button style="display: block; margin:3px auto" size="mini" type="info">查看详情</el-button>
        <!-- <div>
          <el-button style="display: block" type="info" plain>信息按钮</el-button>
        <el-button style="display: block" type="info" plain>信息按钮</el-button>
        </div> -->
       
      </template>
    </el-table-column>
  </el-table>

  <!-- <el-table
      :data="tableData6"
      :span-method="arraySpanMethod"
      style="width: 99%;margin: 0 auto;border: solid 1px #f5f5f5">
      <el-table-column
        prop="id"
        
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        
       >
      </el-table-column>
      <el-table-column
        prop="amount1"
        
        >
      </el-table-column>
      <el-table-column
        prop="amount2"
        >
      </el-table-column>
      <el-table-column
        prop="amount3"
        >
      </el-table-column>
      <el-table-column
        prop="amount3"
        >
      </el-table-column>
      <el-table-column
        prop="amount3"
       
        >
      </el-table-column>
    </el-table> -->

  </div>
</template>
<script>
import { network } from '@/utils/'
export default {
  name: 'orderListComponent',
  data () {
    return {
      tableData6: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        name: '王小虎',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987124',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '12987126',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }],
      lists: [],
      page: 1,
      pageSize: 100,
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    }
  },
  mounted () {
    this.getOrderList()
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        if (columnIndex === 0) {
          return [1, 2]
        }
      }
    },
    getOrderList () {
      this.$http({
        method: 'post',
        url: `/api/seller/orderlist`,
        data: this.$qs.stringify({
          status: -1,
          page: this.page,
          pageSize: this.pageSize
        })
      })
        .then((response) => {
          console.log(response.data.data.list)
          this.total = response.data.data.total
          this.lists = response.data.data.list
          console.log(this.lists)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>
<style scoped>
.one-wrap{
  overflow: hidden;
}
.left{
  width: 70px;
  float: left;
}
.left img{
  width: 100%
}
.right{
  width: 300px;
  float: right;
  position: relative;
}
p{
  margin: 0;
  padding: 0;
  text-align: left
}
.right span{
  position: absolute;
  right: 100px;
  top: 38px
}
</style>

